簡介:本期課程帶領大家使用JS原生代碼封裝圖片畫廊插件,通過本例子把前端的知識做一次綜合展示,全面考驗前端工程師綜合設計、開發(fā)能力。站在產(chǎn)品的角度寫代碼,站在代碼的角度映射產(chǎn)品本質(zhì)??靵砑尤胛覀兊恼n程吧,讓我為前端的明天,貢獻自己的綿薄之力!
第1章 課程準備
示例演示和課程概況,本章節(jié)帶領大家看下圖片畫廊的演示效果,以及本期課程的前期知識儲備和最終你能學到什么。
第2章 DOM結(jié)構(gòu)搭建和渲染
本章節(jié)以演示效果為例,搭建DOM并寫上CSS靜態(tài)展示效果,最后通過JS 渲染到頁面。
第3章 案例分析及 JS 代碼開發(fā)
本章節(jié)帶領大家一起分析下完成圖片畫廊的前提要點,頁面和數(shù)據(jù)該如何組織獲取以及初步交互行為,對圖片的尺寸獲取,過度動畫的開發(fā)。
- 視頻: 3-1 DOM結(jié)構(gòu)渲染 (10:30)
- 視頻: 3-2 元素在頁面中的分組和其他必要參數(shù)詳解 (09:52)
- 視頻: 3-3 同組別數(shù)據(jù)獲取 (20:29)
- 視頻: 3-4 初始化彈出框 (22:25)
- 視頻: 3-5 初始化的時候上下切換是否添加標識 (14:06)
- 視頻: 3-6 獲取圖片尺寸 (09:38)
- 視頻: 3-7 根據(jù)圖片寬高和視口比例設置彈出層尺寸并過渡動畫 (15:47)
- 視頻: 3-8 關閉彈出層和遮罩,清除上一次圖片尺寸 (05:15)
- 視頻: 3-9 上下切換按鈕功能(1) (05:02)
- 視頻: 3-10 上下切換按鈕功能(2) (17:36)